<template>
    <div>
         <div id="login">
            <van-icon class="left" name="arrow-left" size="21" @click="Back"/>
            <span>注册</span>
         </div> 
       <!-- 登录注册 input -->
         <div class="login">
            <van-icon class="phone" name="phone-o" />
            <input 
            maxlength="11"
            @blur="checkName" :state="phoneState"
            v-model="phone"
            required
            type="text" placeholder="   输入手机账号">
            </div>

         <div class="login">
       <van-icon class="mima" name="bag-o" />
            <input 
             maxlength="16"
            @blur="checkPwd" :state="pwdState"
            v-model="pwd"
            class="pwd" type="passward" placeholder="   输入密码">
            </div>
           
             <div class="login">
       <van-icon class="mima" name="bag-o" />
            <input
            @input="search"
            maxlength="16"
            required
            @blur="checkPwd2" :state="re_pwdState"
            v-model="re_pwd"
            ref="re_pwd"
             class="pwd" type="passward" placeholder="   确认密码">
            </div>
             <div class="bg">
            <img src="/img/tx/login1.png" alt="">
              <p id="warning" class="warn1"></p>
            </div>   
            <!-- 登录注册按钮 -->
            <div class="btn1" ref="btn1"  @click="checkForm">注册</div>
    </div>
</template>

<script>

// import { reactive, toRefs } from 'vue'

export default {
  
  data() {
    return {
    phone:'',
    phoneState:'',
    pwd:'',
    pwdState:'',
    re_pwd:'',
    re_pwdState:'',

    }
  },
  
  methods: {
     search(){
          
            if(this.$refs.re_pwd.value.length >= 6 ){
              // console.log(this.$refs.btn1.classList);
                this.$refs.btn1.classList.add("active")
            }else{
                this.$refs.btn1.classList.remove("active")

            }
        },
        
          // 返回上一个页面
    Back(){
         this.$router.push('/login')
    },     

     checkForm(){
      if(this.checkName() && 
         this.checkPwd() && this.checkPwd2()){
        console.log('验证成功，执行注册业务...')  
        // 发送post请求，执行注册业务
        let params = `username=${this.phone}&password=${this.pwd}`
        console.log(params);
     this.axios.post('http://localhost:3000/register', params).then(res=>{
          console.log(res)
          if(res.data.code==200){ // 注册成功
            this.$router.push('/login')
          }else {  // 注册失败
            this.$messagebox('提示', '用户已存在，换一个试试')
          }
        })
      }
    },

    checkName(){
           
            var check = /^1[3-9]\d{9}$/;
            var testphone =check.test(this.phone);
            // this.phone=phone
            if(!testphone){
                this.phoneState='error'
                window.console.log("所输入号码不正确 请输入11位手机号码！")
                warning.innerHTML=`手机号码格式不正确`
                return false
            }else{this.phoneState='success'
            warning.innerHTML= ''
                return true

            }
    
        
    },
     checkPwd(){  // 验证密码
      let exp = /^[0-9]{6,18}$/;
      if(exp.test(this.pwd)){
        this.pwdState = 'success'
        warning.innerHTML =''
        this.checkPwd2()
        return true
      }else{
        this.pwdState = 'error'
                window.console.log("密码格式不正确！")
                
                warning.innerHTML="请输入6-16位密码"
        return false

      }
    },
     checkPwd2(){  // 验证确认密码
      let exp = /^[0-9]{6,18}$/;
      if(exp.test(this.re_pwd) && this.pwd==this.re_pwd){
        this.re_pwdState = 'success'
        console.log('正确');
            warning.innerHTML=''

        return true
      }else{
        this.re_pwdState = 'error'
        window.console.log('不正确');
          
                warning.innerHTML="密码不一致"

        return false
      }
    },

    

},
}

</script>

<style scoped>
#login{
    padding: 0 18px;
    margin-bottom: 15px;
    display: flex;
}
.left{
   margin: 9.5px 0 ; 
   z-index: 100000;
}
span{
        width: 100%;
    height: 44px;
    line-height: 44px;
    position: absolute;
    left: 0;
    right: 0;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding: 0 90px;
    margin: 0 auto;
    box-sizing: border-box;
    color: #4A4945;
    overflow: hidden;
    text-overflow: ellipsis
}
.login{
    margin: 0 60px 0 0;
    padding: 0;
    overflow: hidden;
}
.phone{
    font-size: 25px;
    margin: 20px 15px 20px 20px;   
}
.mima{
    font-size: 25px;
    margin: 20px 15px 20px 20px;   
}
input{
    height: 35px;
    line-height: 35px;
    background-color: #FFFFFF;
    font-size: 18px;
    padding: 15px 18px;
    margin: 15px 0;
    border-radius: 0px;
    border: 0px;
    border-bottom: 1px solid  #E7E2E5;

}
.pwd{
    border: 0px;

}
.btn1{
        background-image: linear-gradient(to right,#0096FB,#1976D2);
    font-size: 18px;
    width: 250px;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    color: #FFFFFF;
    margin: 50px auto 0px;
    opacity: 0.5;
    text-align: center;
    user-select:none;

}
.btn1.active{
    opacity: 1;

}

.bg{
    width: 80%;
    max-width: 400px;
    font-size: 0;
    margin: 0 auto;
}
.bg img{
    display: block;
    width: 100%;
    overflow: hidden;

}

 .bg .warn1{

    width: 300.15px;
    color: black;
    opacity: 0.8;
    font-size: 1px;
     text-align: center;
    line-height: 10px;
    
}
</style>